<template>
	<view class="register">
		<view class="avatar" @tap="handleUpload"><image :src="formData.icon || '../../static/icons/leju-logo.png'" mode=""></image></view>
		<view class="form">
			<uni-easyinput type="number" placeholder="手机号" class="input" v-model="formData.phone" />
			<uni-easyinput type="password" placeholder="请输入登录密码" class="input" passwordIcon v-model="formData.password"></uni-easyinput>
			<uni-easyinput type="text" placeholder="请输入用户名 该用户名将用于账户登录" class="input" passwordIcon v-model="formData.username"></uni-easyinput>
			<uni-easyinput type="text" placeholder="请输入昵称" class="input" v-model="formData.nickname"></uni-easyinput>
			<uni-easyinput type="number" placeholder="请输入验证码" class="input">
				<!-- 获取验证码 -->
				<template v-slot:right>
					<view class="codebtn" @tap="handleGetCode" v-if="!isGetting">获取验证码</view>
					<view class="time" v-else>{{ time }}</view>
				</template>
			</uni-easyinput>
		</view>
		<view class="btn" @tap="handleClick">注册</view>
		<view class="footer"></view>
	</view>
</template>

<script>
import { register } from '../../api/register/index.js';
import WxValidate from '../../utils/WxValidate.js';
import baseUrl from '../../api/config.js';
export default {
	data() {
		return {
			formData: {
				phone: '',
				password: '',
				username: '',
				nickname: '',
				icon: ''
			},
			isGetting: false, // 获取验证码中
			time: 15 // 倒计时时间
		};
	},
	watch: {
		time(newVal, oldVal) {
			// 倒计时为0后,重置time
			if (newVal < 0) {
				this.isGetting = false;
				clearInterval(this.timer);
				this.timer = null;
				this.time = 15;
			}
		}
	},
	methods: {
		// 上传头像
		handleUpload() {
			let _this = this;
			// 选择图片
			uni.chooseImage({
				count: 1,
				success: res => {
					this.formData.icon = res.tempFilePaths[0];
				}
			});
		},
		handleClick() {
			if (!this.WxValidate.checkForm(this.formData)) {
				let error = this.WxValidate.errorList[0];
				uni.showToast({
					title: error.msg,
					icon: 'none'
				});
				return;
			}
			// 先上传头像
			if (this.formData.icon) {
				uni.uploadFile({
					url: baseUrl + '/lejuClient/login/uploadAvatar',
					filePath: this.formData.icon,
					name: 'file',
					success: async uploadResp => {
						console.log(uploadResp);
						const data = JSON.parse(uploadResp.data);
						if (data.success) {
							this.formData.icon = data.data.fileUrl;
							this.doRigister();
						}
					}
				});
			} else {
				this.doRigister();
			}
		},
		//  注册
		async doRigister() {
			const res = await register(this.formData);
			if (res.success) {
				uni.showToast({
					title: '注册成功,请登录'
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '../login/login'
					});
				}, 1000);
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				});
			}
		},
		// 获取验证码
		handleGetCode() {
			this.isGetting = true;
			this.timer = setInterval(() => {
				this.time--;
			}, 1000);
		},
		// 表单校验
		initValidate() {
			let rules = {
				phone: {
					required: true,
					tel: true
				},
				password: {
					required: true
				},
				username: {
					required: true
				},
				nickname: {
					required: true
				}
			};

			let message = {
				phone: {
					required: '请输入手机号',
					tel: '请输入正确的手机号码'
				},
				password: {
					required: '请输入密码'
				},
				username: {
					required: '请输入用户名'
				},
				nickname: {
					required: '请输入昵称'
				}
			};
			//实例化当前的验证规则和提示消息
			this.WxValidate = new WxValidate(rules, message);
		}
	},
	onLoad() {
		// 初识化表单校验对象
		this.initValidate();
	}
};
</script>

<style lang="scss" scoped>
.register {
	overflow: hidden;
	.avatar {
		width: 160rpx;
		height: 160rpx;
		margin: 128rpx auto 72rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	// 输入框
	.form {
		display: flex;
		flex-direction: column;
		padding: 0 70rpx;

		.input {
			width: 100%;
			box-sizing: border-box;
			padding: 32rpx;
			box-shadow: 0 0 60rpx 0 rgba(43, 86, 112, 0.1);
			margin: 24rpx 0;
			border-radius: 60rpx;
			background: transparent;
			/deep/ .is-input-border {
				min-height: 0 !important;
				border: none;
			}
		}
		.codebtn {
			font-size: 24rpx;
		}
		.time {
			color: rgba(0, 0, 0, 0.4);
		}
	}
	.btn {
		color: #fff;
		font-size: 30rpx;
		height: 100rpx;
		width: 600rpx;
		margin: 96rpx auto 50rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 100rpx;
		background-color: #354e44;
	}
}
</style>
